<template>
	<view>
		<view class="int_box zl-m-t-20">
			<view class="box_title zl-flex">
				<view class="time zl-font-bold  zl-font-24">
					资源包
				</view>
				<view class="way zl-font-bold  zl-font-24">
					功能模块
				</view>
				<view class="num zl-text-center zl-font-bold  zl-font-24">
					扣除数
				</view>
			</view>
			<!-- <view class="box_mini zl-flex">
				<view class="time ">
					所有剪辑库
				</view>
				<view class="way  ">
					合计
				</view>
				<view class="num  zl-text-center zl-font-500">
					{{total>0?'-':''}}{{total}}
				</view>
			</view> -->
			<view class="box-con">
				<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false"
					:auto-clean-list-when-reload="false" :auto="true" :paging-style="{ height:'100%' }"
					:show-refresher-when-reload="true" :default-page-size="20" :auto-show-back-to-top="true"
					:hide-empty-view="true" :show-scrollbar="false">
					<view class="cell-box" v-for="(item,index) in dataList" :key="index">
						<view class="cell zl-flex">
							<view class="way zl-font-24 zl-m-r-15">
								{{item.cdkCode}}
							</view>
							<view class="time">
								<view class="time-name zl-one-yichu">
									{{item.function}}
								</view>
								<view class="time-num">
									{{$util.fomateDate(item.createTime/1000)}}
								</view>
							</view>


							<!-- <view v-if="item.method===10||item.method===11"
                    class="num zl-font-30 zl-text-center "
                    style="color: #EB5E00 ;">
                {{item.successCount>0?'+':''}}{{item.successCount}}
              </view> -->

							<view class="num zl-font-30 zl-text-center " style="color: #EB5E00 ;">
								{{item.count}}
							</view>

						</view>
					</view>
					<view v-if="dataList.length<=0" class=" zl-flex-col zl-col-center"
						style="width: 690rpx;margin-top: 50%;">
						<image src="../../static/work/empty.png" mode="widthFix"
							style="width: 230rpx;margin-bottom: 48rpx;"></image>
						<text class="zl-font-30 zl-color-666">空空如也!</text>
					</view>
				</z-paging>
			</view>
			<!-- <view class="footer">
        <view class="zl-flex zl-row-between"
              style="height: 128rpx;width: 100%;">
          <view class="f-left zl-flex ">
            <text class="zl-font-500 zl-font-30 zl-m-r-4">合计扣除：</text>
            <text class="zl-font-32"
                  style="color: #EB5E00;">{{total>0?'-':''}}{{total}}</text>
          </view>
          <view @click="to_quota_explain()"
                class="r-btn zl-theme-btn-1 zl-flex zl-row-center">
            <text>扣除配额说明</text>
            <image src="../static/help_w.png"
                   mode=""></image>
          </view>
        </view>
      </view> -->

		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList: [],
				total: 0
			};
		},
		onLoad() {

		},
		methods: {
			queryList(page, limit) {
				this.api.account.getassetrecord({
					page: page,
					limit: limit,
					packageId: 0
				}).then(res => {
					if (res.code === 0) {
						if (page === 1) {
							this.total = res.data.other.count
						}
						this.$refs.paging.complete(res.data.list);
					} else {
						// let arr = [{
						// 		desc: 10,
						// 		createTime: '2023年5月10日16:09:33',
						// 		function: '555',
						// 		balance: 10
						// 	},
						// 	{
						// 		desc: 11,
						// 		createTime: '2023年5月10日16:09:33',
						// 		function: '555',
						// 		balance: 11
						// 	},
						// 	{
						// 		desc: 1,
						// 		createTimetime: '2023年5月10日16:09:33',
						// 		function: '555',
						// 		balance: 11
						// 	}
						// ]
						// this.$refs.paging.complete(arr);

						this.$util.msg(res.msg);
						this.$refs.paging.complete(false);
					}
				}).catch(err => {
					this.$util.msg('请检查网络连接！');
					this.$refs.paging.complete(false);
				})
			}
		}

	}
</script>

<style lang="scss" scoped>
	.tips {
		font-weight: 600;
		color: #e4265b;
		line-height: 40rpx;
		margin-left: 30rpx;
	}

	.int_box {
		width: 750rpx;
		border-radius: 20rpx;
		overflow: hidden;

		// margin-left: 30rpx;
		.box_title {
			width: 690rpx;
			margin: 0 auto;
			height: 80rpx;
			background: #e6e8f7;
			border-radius: 20rpx 20rpx 0rpx 0rpx;
			padding: 0 40rpx;
			z-index: 999;

			view {
				font-size: 24rpx;
				color: #333333;
			}
		}

		.box_mini {
			width: 690rpx;
			margin: 0 auto;
			height: 110rpx;
			background: #fff;
			padding: 0 40rpx;
			border-bottom: 1rpx solid #e3e3e3;
			z-index: 999;

			view {
				font-size: 24rpx;
				color: #eb5e00;
			}
		}

		.time {
			width: 255rpx;

			.time-name {
				width: 280rpx;
				font-size: 24rpx;
				color: #000000;
				line-height: 33rpx;
			}

			.time-num {
				font-size: 20rpx;
				color: #999999;
				line-height: 28rpx;
				margin-top: 4rpx;
			}
		}

		.way {
			width: 255rpx;
		}

		.num {
			width: 150rpx;
		}

		.box-con {
			// width: 750rpx;
			width: 690rpx;
			margin: 0 auto;
			// - 128rpx
			height: calc(100vh - 100rpx - env(safe-area-inset-bottom));
			border-radius: 0 0 20rpx 20rpx;
			background-color: #fff;
			overflow: hidden;

			.cell-box:last-child {
				border-bottom: none;
			}

			.cell-box {
				border-bottom: 1rpx solid rgba(0, 0, 0, 0.03);
				// border-bottom: 0.5rpx solid #E1E1E1;
				padding: 0 40rpx;
				background-color: #fff;
				// width: 690rpx;
				// margin: 0 auto;

				.cell {
					height: 110rpx;
				}

				.extend-box {
					padding-bottom: 20rpx;

					.extend-cell {
						display: flex;
						// align-items: center;
						margin-top: 10rpx;

						.con {
							width: 480rpx;
							margin-left: 20rpx;
						}
					}
				}
			}
		}
	}

	.footer {
		position: fixed;

		bottom: 0;
		width: 750rpx;
		height: calc(128rpx + env(safe-area-inset-bottom));
		background: #ffffff;
		box-shadow: 0rpx -3rpx 9rpx 0rpx rgba(0, 0, 0, 0.1);
		padding: 0 30rpx;

		.r-btn {
			width: 410rpx;
			height: 88rpx;
			border-radius: 44rpx;
			font-size: 32rpx;
			font-weight: 600;
			color: #ffffff;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-left: 6rpx;
				vertical-align: middle;
			}
		}
	}
</style>